<template>
  <div>
    <p>我是子组件</p>
    <p>插槽：slot，是一个容器，给子组件标签内容留下的空间</p>
    <p>插槽的分类：
      1.匿名插槽：不作区分，什么都可以显示，流浪者的收容所
      2.具名插槽：各回各家，各找各妈
    </p>
    <!-- 1.匿名插槽 -->
    <!-- <slot></slot> -->
    <!-- 2.具名插槽 -->
    <!-- <slot name="top"></slot>
    <slot name="mid"></slot> -->
    <!-- 3.作用域插槽：不仅可以传dom还可以传数据 -->
    <slot v-for="item in arr" :item="item"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['html', 'css', 'js', 'vue']
    }
  },
}
</script>

<style>
  
</style>